<template>
    <div>
        <el-card shadow="hover">
            <!-- 表格区域 -->
            <div class="table-body">
                <!-- 左上角按钮 -->
                <div class="table-right-top">
                    <el-button type="primary" icon="el-icon-plus" @click="onContactAdd()">{{ $i18n.t('ADD_CONTACT') }}</el-button>
                    <el-button type="success" icon="el-icon-refresh-left" @click="reacquireContact" :loading="btnLoading">{{ $i18n.t('RE_GET_CONTACT') }}</el-button>
                </div>
                <el-table highlight-current-row @current-change="handleCurrentChange" border style="width: 100%;" :data="data" v-loading="loading" ref="singleTable">
                    <el-table-column align="center" prop="name" :label="$i18n.t('CONTACT_NAME')" :min-width="120"></el-table-column>
                    <el-table-column align="center" prop="relation_text" :label="$i18n.t('CONTACT_RELATION')" :min-width="120"></el-table-column>
                    <el-table-column align="center" prop="phone" :label="$i18n.t('CONTACT_PHONE')" :min-width="120"></el-table-column>
                    <el-table-column align="center" prop="remark" :label="$i18n.t('REMARK')" :min-width="150"></el-table-column>
                    <el-table-column align="center" prop="caller_num" :label="$i18n.t('CALLER_NUM')" :min-width="100"></el-table-column>
                    <el-table-column align="center" prop="called_num" :label="$i18n.t('CALLED_NUM')" :min-width="100"></el-table-column>
                    <el-table-column align="center" :label="$i18n.t('TOTAL_NUM')" :min-width="100">
                        <template slot-scope="scope">
                            {{ scope.row.caller_num + scope.row.called_num }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="last_call_status" :label="$i18n.t('LAST_CALL_STATUS')" :min-width="100"></el-table-column>
                    <!-- 右侧按钮 -->
                    <el-table-column align="center" :label="$i18n.t('ACTION')" fixed="right" :width="200">
                        <template slot-scope="scope">
                            <el-link icon="el-icon-edit" @click="onContactEdit(scope.row)">{{ $i18n.t('EDIT') }}</el-link>
                            <el-divider direction="vertical"></el-divider>
                            <el-link icon="el-icon-custom-ios-chatbubbles">{{ $i18n.t('SEND_MESSAGE') }}</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="table-pagination" style="margin-bottom: 0">
                    <el-pagination
                        background
                        layout="total, prev, pager, next, ->, sizes"
                        :page-size.sync="page.perPage"
                        :total="page.total"
                        :page-count="page.pageCount"
                        :current-page.sync="page.currentPage"
                        :page-sizes="[5, 10, 20, 30]"
                        @current-change="onCurrentPageChange"
                        @size-change="onPerPageChange"
                    >
                    </el-pagination>
                </div>
            </div>
        </el-card>
        <!-- 跟进 -->
        <el-card shadow="hover" style="margin-top: 15px">
            <div slot="header" class="clearfix">
                <span>{{ $i18n.t('MAKE_CALL') }}</span>
            </div>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item :label="$i18n.t('CONTACT_NAME')">
                    <el-input disabled :value="post.name"></el-input>
                </el-form-item>
                <el-form-item :label="$i18n.t('CONTACT_RELATION')">
                    <el-input disabled :value="post.relation_text"></el-input>
                </el-form-item>
                <el-form-item :label="$i18n.t('CONTACT_PHONE')">
                    <el-input disabled :value="post.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-if="calling === false" :disabled="post.id === 0" :loading="btnLoading" @click="makeCall">{{ $i18n.t('CALL') }}</el-button>
                    <el-button type="danger" v-if="calling === true" :disabled="post.id === 0" :loading="btnLoading" @click="killCall">{{ $i18n.t('KILL_CALL') }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 贷后跟进记录 -->
        <el-card shadow="hover" style="margin-top: 15px">
            <div slot="header" class="clearfix">
                <span>{{ $i18n.t('FOLLOW_RECORD') }}</span>
            </div>
            <el-form label-position="right" label-width="120px">
                <el-form-item required :label="$i18n.t('FOLLOW_RESULT')">
                    <el-radio-group v-model="post.follow_result">
                        <el-radio :label="item.value" v-for="(item, index) in followResultList" :key="index">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$i18n.t('REMARK')">
                    <el-input type="textarea" :rows="4" v-model="post.remark" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('REMARK') })"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="post.follow_result === 0" :loading="btnLoading" @click="onSubmit">{{ $i18n.t('SUBMIT') }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 修改/添加联系人 -->
        <el-drawer
            :title="$i18n.t(mdl.id > 0 ? 'EDIT' : 'ADD')"
            :visible.sync="drawer"
            destroy-on-close
            ref="drawer"
            size="400px"
        >
            <contact-form-modal
                ref="ContactModal"
                :mdl="mdl"
                :handle-close-drawer="handleCloseDrawer"
                @submit="onContactSubmit"
            />
        </el-drawer>
    </div>
</template>

<script>
    import { getLoanedDetail, handleLoanedTask } from '@/api/loaned'
    import ContactFormModal from '@/components/ContactFormModal'

    export default {
        name: 'LoanedFollow',
        components: { ContactFormModal },
        data () {
            return {
                drawer: false,
                mdl: {},
                post: {
                    id: 0,
                    name: '',
                    phone: '',
                    relation: '',
                    relation_text: '',
                    follow_result: 0,
                    remark: ''
                },
                loading: false,
                btnLoading: false,
                query: {},
                data: [],
                page: {
                    total: 0,
                    currentPage: 1,
                    perPage: 5,
                    pageCount: 1
                },
                calling: false
            }
        },
        watch: {
            query () {
                this.fetch()
            }
        },
        activated () {
            this.query = this.$route.query
        },
        created () {
            this.query = this.$route.query
        },
        computed: {
            activeName () {
                return this.data.detail.completed === true ? 'second' : 'first'
            },
            followResultList () {
                return this.$store.getters.options.LoanedFollowResultList
            }
        },
        methods: {
            // 页数切换
            onCurrentPageChange (page) {
                this.page.currentPage = page
                this.fetch()
            },
            // 每页显示数量修改
            onPerPageChange (perPage) {
                this.page.perPage = perPage
                this.fetch()
            },
            // 修改跟进结论
            onSubmit () {
                this.btnLoading = true
                const { id } = this.query
                // eslint-disable-next-line camelcase
                const { follow_result, remark } = this.post
                handleLoanedTask(id, { method: 'UpdateFollowResult', follow_result, remark }).then(res => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                }).finally(() => {
                    this.btnLoading = false
                })
            },
            // 渲染数据
            fetch () {
                this.loading = true
                const { id } = this.query
                getLoanedDetail(id, { method: 'Contact', page: this.page.currentPage, perPage: this.page.perPage }).then(res => {
                    // eslint-disable-next-line camelcase
                    const { data, last_page, total } = res.result
                    this.data = data
                    this.page.total = total
                    // eslint-disable-next-line camelcase
                    this.page.pageCount = last_page
                    if (this.data.length > 0) {
                        this.$refs.singleTable.setCurrentRow(this.data[0])
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            // 当前选择的数据
            handleCurrentChange (row) {
                if (row) {
                    this.post.id = row.id
                    this.post.name = row.name
                    this.post.relation = row.relation
                    this.post.relation_text = row.relation_text
                    this.post.phone = row.phone
                } else {
                    this.post.id = 0
                    this.post.name = ''
                    this.post.relation = ''
                    this.post.relation_text = ''
                    this.post.phone = ''
                }
            },
            // 关闭抽屉方法
            handleCloseDrawer () {
                this.$refs.drawer.closeDrawer()
            },
            // 联系人修改
            onContactEdit (row) {
                this.mdl = Object.assign({}, row)
                this.drawer = true
            },
            // 添加联系人
            onContactAdd () {
                this.mdl = {
                    id: 0,
                    name: '',
                    phone: '',
                    relation: '',
                    number_type: null,
                    remark: ''
                }
                this.drawer = true
            },
            // 提交修改/添加联系人
            onContactSubmit () {
                const son = this.$refs.ContactModal
                // 先清空表单错误提示
                son.errors = {}
                son.submitLogin = true
                // 设置手动接管message提示
                this.$store.dispatch('MessageTake', true)
                son.errorMessage = ''
                if (this.mdl.id === 0) {
                    handleLoanedTask(this.query.id, { method: 'AddContact', ...this.mdl }).then(() => {
                        // 关闭抽屉
                        this.handleCloseDrawer()
                        this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                        // 刷新数据
                        this.fetch()
                    }).catch((error) => {
                        // 后端过来的表单错误回显
                        son.errors = Object.assign({}, { ...son.errors, ...error.errors })
                        // 手动处理错误
                        if (!error.errors) {
                            son.errorMessage = error.message
                        }
                    }).finally(() => {
                        son.submitLogin = false
                    })
                } else {
                    handleLoanedTask(this.query.id, { method: 'EditContact', ...this.mdl }).then(() => {
                        // 关闭抽屉
                        this.handleCloseDrawer()
                        this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                        // 刷新数据
                        this.fetch()
                    }).catch((error) => {
                        // 后端过来的表单错误回显
                        son.errors = Object.assign({}, { ...son.errors, ...error.errors })
                        if (!error.errors) {
                            son.errorMessage = error.message
                        }
                    }).finally(() => {
                        son.submitLogin = false
                    })
                }
            },
            // 重新获取通讯录
            reacquireContact () {
                this.btnLoading = true
                handleLoanedTask(this.query.id, { method: 'ReacquireContact' }).then(() => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                    // 刷新数据
                    this.fetch()
                }).finally(() => {
                    this.btnLoading = false
                })
            },
            // 拨打电话
            makeCall () {
                this.btnLoading = true
                const { name, phone } = this.post
                handleLoanedTask(this.query.id, { method: 'MakeCall', contact_id: this.post.id, name, phone }).then(() => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                    this.calling = true
                }).finally(() => {
                    this.btnLoading = false
                })
            },
            // 挂断电话
            killCall () {
                this.btnLoading = true
                handleLoanedTask(this.query.id, { method: 'KillCall' }).then(() => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                    this.calling = false
                }).finally(() => {
                    this.btnLoading = false
                })
            }
        }
    }
</script>

<style scoped>

</style>
